<template>
    <view>
        <template v-if="compName === 'mall'">
            <!-- 购买浮窗 -->

            <view v-if="showGoodsBox == 1" class="goods_box_mask" @tap="closeGoodsBox"></view>

            <view v-if="showGoodsBox == 1" class="goods_box">
                <view class="specification-wrapper">
                    <scroll-view class="specification-wrapper-content">
                        <view class="specification-header">
                            <view class="specification-left">
                                <image class="product-img" :src="boxGoodsInfo.goods_image" mode="aspectFill"></image>
                            </view>
                            <view class="specification-right">
                                <view style="margin-bottom: 5px; font-weight: 600; font-size: 15px">
                                    {{ boxGoodsInfo.goods_name }}
                                </view>
                                <view class="price-content">
                                    <text class="sign">¥</text>
                                    <text class="price">{{ boxGoodsInfo.goods_price_max }}</text>
                                </view>
                                <view class="inventory">
                                    <text style="color: #f00; font-weight: 600">{{ boxGoodsInfo.gift_point }}积分</text>
                                </view>
                            </view>
                        </view>
                        <view class="specification-content">
                            <view class="number-box-view">
                                <view style="flex: 1 1 0%">数量</view>
                                <view style="flex: 4 1 0%; text-align: right">
                                    <view class="number-box">
                                        <view @tap="bindGoodsNums" data-type="-1" class="u-icon-minus">
                                            <view class="num-btn">-</view>
                                        </view>
                                        <view class="u-number-input">
                                            <input class="uni-input-input" type="number" @input="bindChangeGoodsNums" :value="boxGoodsNums" />
                                        </view>
                                        <view @tap="bindGoodsNums" data-type="1" class="u-icon-plus">
                                            <view class="num-btn">+</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                    <view class="close" @tap="closeGoodsBox">
                        <view class="close-item"></view>
                    </view>
                </view>
                <view class="btn-wrapper">
                    <view @tap="buyNow" class="sure">立即购买</view>
                </view>
            </view>

            <!-- 商城顶部 -->

            <view class="mall_top">
                <view>{{ mallUser.points }}</view>
                <view>消费积分</view>
                <view v-if="live.vote_end_at_gm">
                    积分兑换票数将于
                    <text>{{ live.vote_end_at_gm }}</text>
                    截止，请及时兑换！
                </view>
            </view>

            <!-- 商城列表 -->

            <view v-if="mallShow == 'goods_list'" class="goods_list">
                <view class="goods_item" v-for="(item, index) in goodsList" :key="index">
                    <view class="goods_image" @tap="showGoodsInfo" :data-goodsId="item.goods_id"><image mode="aspectFill" :src="item.goods_image" class=""></image></view>

                    <view class="goods_name" @tap="showGoodsInfo" :data-goodsId="item.goods_id">{{ item.goods_name }}</view>

                    <view class="goods_price" @tap="showGoodsInfo" :data-goodsId="item.goods_id">
                        {{ item.goods_price_max }}
                        <text class="goods_price_line">{{ item.line_price_max }}</text>
                    </view>

                    <view class="goods_score" @tap="showGoodsInfo" :data-goodsId="item.goods_id">{{ item.gift_point }}积分</view>

                    <view class="mall_buy_btn" @tap="buyStep1" :data-goods="item">即刻加购</view>
                </view>
            </view>

            <!-- 商品详情 -->

            <view class="tf5Y6Rnm oYXhzdcB" style="width: 100%; opacity: 1" v-if="mallShow == 'goods_info'">
                <view class="o_81Q71A ocVPkzpT" style="z-index: 1; width: 100%">
                    <view class="qMg838nE">
                        <view class="KnrJvlPd">
                            <view class="XwfPkAx9" style="overflow-y: auto">
                                <view class="goods_img">
                                    <image mode="scaleToFill" style="width: 100%; height: 375px" :src="goodsInfo.goods_image"></image>
                                </view>
                                <view class="goods_info">
                                    <view class="av13G9ne">
                                        <view class="F6aVwyDX UyLROlKI">
                                            <view class="dxA8pu53">
                                                <view class="U5WnSX9N">
                                                    <view class="gW0Ua33u">
                                                        <view class="eb_3ARkg"></view>
                                                        <view class="gHv33plJ">￥</view>
                                                        <view class="r9__IJQQ">{{ goodsInfo.goods_price_max }}</view>
                                                        <view class="cdCajwpG"></view>
                                                    </view>
                                                </view>
                                                <!-- <view class="yB7AUZS0"><span class="eb_3ARkg">抢购价</span><span class="gHv33plJ">￥</span><span class="r9__IJQQ">{{goodsInfo.goods_price_max}}</span><span class="cdCajwpG"></span></view> -->
                                            </view>
                                        </view>
                                        <view class="jI3pfLIL lPWtSqvd">
                                            <!-- <view class="breo4Taa">
                  <view class="sJ5zGidB"><image src="https://p6-piu.byteimg.com/tos-cn-i-8jisjyls3a/2fdfa37015924263adedb19a57796fc1~tplv-8jisjyls3a-3:0:0:q75.png" class="JdVip34R" mode="heightFix"></image>
                    <view class="SGvvfTjJ"><span>粉丝券</span>
                      <view class="sfHKPpQg">·</view><span>满59减20</span></view>
                  </view><image src="" class="xLDopURc" mode="heightFix"></image></view> -->
                                        </view>
                                    </view>
                                    <view class="NVCmCoE_">
                                        <span class="vs9hmvGz">{{ goodsInfo.goods_name }}</span>
                                    </view>
                                    <view class="PC9ybBbT">
                                        <image
                                            class="ZSXjdFag"
                                            src="http://p26-item.ecombdimg.com/tos-cn-i-5mmsx3fupr/product_detail_head.png~tplv-5mmsx3fupr-origin-png.png"
                                            mode="widthFix"
                                        ></image>
                                    </view>
                                    <view class="QyX6sLkV">
                                        <view class="eG19UsAr">
                                            <view class="p1kE0uFd S25T9aPi"></view>
                                        </view>
                                    </view>

                                    <view class="uEue5tgG">
                                        <view class="zRKp8LD4">
                                            <view class="tLhBSHd5" @tap="showGoodsList">
                                                <image
                                                    src=""
                                                    mode="heightFix"
                                                    style="width: 22px; height: 22px"
                                                ></image>
                                                返回
                                            </view>
                                        </view>
                                        <!-- <view class="rlRQpFqX">
                领券<image src="" style="width: 12px;height: 12px;" mode="heightFix"></image>
              </view> -->
                                        <view class="mRtbqMIj" @tap="buyNow" :data-goodsId="goodsInfo.goods_id">
                                            <view class="EUyS8DCM">
                                                <view class="Mq0hAF9g uuIRfnYu"></view>
                                                立即购买
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script>
export default {
    props: ['data', 'compName'],
    computed: {
        showGoodsBox() {
            return this.data.showGoodsBox;
        },
        boxGoodsInfo() {
            return this.data.boxGoodsInfo;
        },
        boxGoodsNums() {
            return this.data.boxGoodsNums;
        },
        mallUser() {
            return this.data.mallUser;
        },
        live() {
            return this.data.live;
        },
        mallShow() {
            return this.data.mallShow;
        },
        goodsList() {
            return this.data.goodsList;
        },
        index() {
            return this.data.index;
        },
        item() {
            return this.data.item;
        },
        goodsInfo() {
            return this.data.goodsInfo;
        },
        goodsContent() {
            return this.data.goodsContent;
        },
        closeGoodsBox() {
            return this.data.closeGoodsBox;
        },
        bindGoodsNums() {
            return this.data.bindGoodsNums;
        },
        bindChangeGoodsNums() {
            return this.data.bindChangeGoodsNums;
        },
        buyNow() {
            return this.data.buyNow;
        },
        showGoodsInfo() {
            return this.data.showGoodsInfo;
        },
        buyStep1() {
            return this.data.buyStep1;
        },
        showGoodsList() {
            return this.data.showGoodsList;
        }
    }
};
</script>
<style>
@import './mall.css';
</style>
